::before 和 ::after 是 CSS 中的伪元素，它们允许开发者在元素的内容前面或后面插入虚拟的内容，而无需改变 HTML 结构。以下是这两个伪元素的具体作用：

::before 伪元素

• 插入内容：在元素的内容前面插入指定的内容。这通常用于添加装饰性的元素或文本，以提升页面的视觉效果。
• 样式定制：通过 CSS 属性（如 color、font-size、position 等）为插入的内容定制样式，使其与页面的其他部分协调一致。
• 清除浮动：在某些情况下，可以使用 ::before 伪元素与空的 content 属性和特定的 display、clear 属性组合来清除浮动，解决父级元素因子元素浮动而高度塌陷的问题。但这一用法相对不常见，更多时候会使用 ::after 伪元素来清除浮动。

::after 伪元素

• 插入内容：与 ::before 类似，但插入的内容位于元素的最后一个子元素之后。
• 样式定制：同样可以使用各种 CSS 属性为插入的内容定制样式。
• 清除浮动：::after 伪元素常用于清除浮动。通过为伪元素设置空的 content 属性、display: table 以及 clear: both，可以创建一个空白块来清除浮动，从而防止父元素塌陷或布局错乱。
• 增强用户界面：可以使用 ::after 伪元素来添加各种图标（如箭头、勾号、叉号等），以增强用户界面的可视化效果。同时，也可以为元素添加装饰效果（如下划线、边框等），以增加页面的美观性。

注意事项

• content 属性：无论是 ::before 还是 ::after 伪元素，content 属性都是必需的。如果没有指定 content 属性，伪元素将不会显示。
• 层叠顺序：伪元素会被认为是元素内容的一部分，因此它们会覆盖元素的背景，但不会覆盖元素的边框。
• 兼容性：现代浏览器都支持 ::before 和 ::after 伪元素，因此可以在大多数场景下放心使用。

综上所述，::before 和 ::after 伪元素为开发者提供了一种在不改变 HTML 结构的情况下灵活添加装饰性内容和其他元素的方法。它们不仅可以用于美化页面，还可以解决一些布局问题。